<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-18 flex v-align-c">
      <span></span>
      <i>社区团购</i>
    </h2>
    <div class="goods-form">
      <ul class="promotion-tab-style flex v-align-c">
        <li class="flex-item flex-center text-align-c" @click="details.propMap.promotionStyle = '12'"
          :class="details.propMap.promotionStyle === '12' ? 'actived' : ''">
          <img v-show="details.propMap.promotionStyle === '12'" :src="tabSty11" class="width-20 height-20" alt="">
          <img v-show="details.propMap.promotionStyle !== '12'" :src="tabSty1" class="width-20 height-20" alt="">
        </li>
        <li class="flex-item flex-center text-align-c" @click="details.propMap.promotionStyle = '14'"
          :class="details.propMap.promotionStyle === '14' ? 'actived' : ''">
          <img v-show="details.propMap.promotionStyle === '14'" :src="tabSty21" class="width-20 height-20" alt="">
          <img v-show="details.propMap.promotionStyle !== '14'" :src="tabSty2" class="width-20 height-20" alt="">
        </li>
        <li class="flex-item flex-center text-align-c" @click="details.propMap.promotionStyle = '11'"
          :class="details.propMap.promotionStyle === '11' ? 'actived' : ''">
          <img v-show="details.propMap.promotionStyle === '11'" :src="tabSty31" class="width-20 height-20" alt="">
          <img v-show="details.propMap.promotionStyle !== '11'" :src="tabSty3" class="width-20 height-20" alt="">
        </li>
        <li class="flex-item flex-center text-align-c" @click="details.propMap.promotionStyle = '10'"
          :class="details.propMap.promotionStyle === '10' ? 'actived' : ''">
          <img v-show="details.propMap.promotionStyle === '10'" :src="tabSty41" class="width-20 height-20" alt="">
          <img v-show="details.propMap.promotionStyle !== '10'" :src="tabSty4" class="width-20 height-20" alt="">
        </li>
      </ul>
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
        <el-tabs v-model="promotionActiveName" class="promotion-pane-tab">
          <el-tab-pane label="活动设置" name="1">
            <div class="pad-t-7"></div>
            <div class="border-box">
              <div class="mar-t--7 mar-b--15">
                <el-form-item>
                  <div>
                    <h4>首次加载商品数量</h4>
                    <div class="mar-t--15">
                      <el-form-item>
                        <div class="flex font-12">
                          <el-slider v-model="details.propMap.firstLoadNum" :min="1" :max="20" class="flex-item">
                          </el-slider>
                          <span class="pad-l-10">{{details.propMap.firstLoadNum}}(个)</span>
                        </div>
                      </el-form-item>
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>
            <div class="mar-l--25 mar-t--28 pad-b-15">
              <h3 class="pancel-s-title">添加活动({{ details.componentPromotionItemList.length }}/5)</h3>
            </div>
            <draggable id="content-box flex-item" v-model="details.componentPromotionItemList" dragable="true"
              :move="getdata" @update="datadragEnd">
              <div v-for="(item, index) in details.componentPromotionItemList" :key="'btns-list-' + index">
                <div class="drag-box">
                  <div class="border-box btns-form flex">
                    <div class="mar-l--8 mar-t--14 pad-r-12 pad-t-8 border-r-blue">
                      <img class="width-12 height-10" :src="iconDrag" alt="">
                    </div>
                    <div class="flex-item promotion-rinfo mar-r--20 mar-t--14">
                      <div
                        class="promotion-r-title font-color-3 font-w font-14 border-b-blue pad-l-14 pad-r-14 pad-t-8 pad-b-8">
                        <div class="line-1">{{item.title}}</div>
                      </div>
                      <div class="border-b-blue pad-l-20 pad-b-2 font-14 font-color-6 promotion-rtype">
                        <div class="flex v-align-c pad-t-4 pad-b-4">
                          <span>状态</span>
                          <span v-if="item.promotionStatus === 1" class="font-red">待开始</span>
                          <span v-if="item.promotionStatus === 2" class="font-red">进行中</span>
                          <span v-if="item.promotionStatus === 3" class="font-red">已结束</span>
                        </div>
                        <div class="flex v-align-c pad-t-4 pad-b-4">
                          <span>开始时间</span>
                          <span>{{item.startTime}}</span>
                        </div>
                        <div class="flex v-align-c pad-t-4 pad-b-4">
                          <span>结束时间</span>
                          <span>{{item.endTime}}</span>
                        </div>
                      </div>
                      <div class="pad-l-20 pad-r-20 pad-t-6 pad-b-11 font-12 font-color-3 promotion-rtype">
                        <div class="flex v-align-c pad-t-4 pad-b-4">
                          <label>显示名称</label>
                          <el-input placeholder="最多5个字" class="mini-s-input" maxlength="5" v-model="item.titleName">
                          </el-input>
                        </div>
                        <div class="flex v-align-c pad-t-4 pad-b-4">
                          <label>按钮名称</label>
                          <el-input placeholder="最多5个字" class="mini-s-input" maxlength="5" v-model="item.buttonName">
                          </el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="btn-edit-del selected">
                    <div class="btn-del" @click="remove(index)">删除</div>
                  </div>
                </div>
              </div>
            </draggable>
            <div v-if="details.componentPromotionItemList.length < 5" class="flex add-actiy-btn mar-t-10 mar-b-10">
              <el-button class="flex-item flex-center" @click="selectSeckillLayer">
                <div class="flex v-align-c">
                  <i class="el-icon-plus mar-r-5 font-20"></i>
                  <div>添加活动</div>
                </div>
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="样式设置" name="2">
            <div class="pad-t-7"></div>
            <div class="mar-l--25 mar-t--28 pad-b-15">
              <h3 class="pancel-s-title">颜色样式</h3>
            </div>
            <div class="border-box near-box">
              <h4>活动标题色</h4>
              <div class="mar-t--5 mar-b--8">
                <el-form-item>
                  <div class="flex font-12 pad-r-30 pad-l-4">
                    <el-color-picker v-model="details.propMap.titleColor"
                      @active-change="activecolorChange(details, 'titleColor', '#333333', $event)"
                      @change="colorChange(details, 'titleColor', '#333333', $event)" :predefine="predefineColors"
                      class="color-sel" />
                    <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.titleColor"
                      @change="iptColorChange(details, 'titleColor', '#333333', $event)">
                    </el-input>
                    <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'titleColor', '#333333')">
                      重置</el-button>
                  </div>
                </el-form-item>
              </div>
              <h4>活动商品名称</h4>
              <div class="mar-t-2 mar-b--8">
                <el-form-item>
                  <div class="flex font-12 pad-r-30 pad-l-4">
                    <el-color-picker v-model="details.propMap.goodsTitleColor"
                      @active-change="activecolorChange(details, 'goodsTitleColor', '#333333', $event)"
                      @change="colorChange(details, 'goodsTitleColor', '#333333', $event)" :predefine="predefineColors"
                      class="color-sel" />
                    <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容"
                      v-model="details.propMap.goodsTitleColor"
                      @change="iptColorChange(details, 'goodsTitleColor', '#333333', $event)">
                    </el-input>
                    <el-button type="text" class="color-sel-btn"
                      @click="resetColor(details, 'goodsTitleColor', '#333333')">重置</el-button>
                  </div>
                </el-form-item>
              </div>
              <h4>活动价</h4>
              <div class="mar-t-2 mar-b--8">
                <el-form-item>
                  <div class="flex font-12 pad-r-30 pad-l-4">
                    <el-color-picker v-model="details.propMap.goodsPriceColor"
                      @active-change="activecolorChange(details, 'goodsPriceColor', '#F8303D', $event)"
                      @change="colorChange(details, 'goodsPriceColor', '#F8303D', $event)" :predefine="predefineColors"
                      class="color-sel" />
                    <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容"
                      v-model="details.propMap.goodsPriceColor"
                      @change="iptColorChange(details, 'goodsPriceColor', '#F8303D', $event)">
                    </el-input>
                    <el-button type="text" class="color-sel-btn"
                      @click="resetColor(details, 'goodsPriceColor', '#F8303D')">重置</el-button>
                  </div>
                </el-form-item>
              </div>
              <h4>原价与划线</h4>
              <div class="mar-t-2 mar-b--8">
                <el-form-item>
                  <div class="flex font-12 pad-r-30 pad-l-4">
                    <el-color-picker v-model="details.propMap.goodsScribingPriceColor"
                      @active-change="activecolorChange(details, 'goodsScribingPriceColor', '#999999', $event)"
                      @change="colorChange(details, 'goodsScribingPriceColor', '#999999', $event)"
                      :predefine="predefineColors" class="color-sel" />
                    <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容"
                      v-model="details.propMap.goodsScribingPriceColor"
                      @change="iptColorChange(details, 'goodsScribingPriceColor', '#999999', $event)">
                    </el-input>
                    <el-button type="text" class="color-sel-btn"
                      @click="resetColor(details, 'goodsScribingPriceColor', '#999999')">重置</el-button>
                  </div>
                </el-form-item>
              </div>
              <h4>加入购物车按钮</h4>
              <div class="mar-t-2 mar-b--8">
                <el-form-item>
                  <div class="flex font-12 pad-r-30 pad-l-4">
                    <el-color-picker v-model="details.propMap.btnBuyCartColor"
                      @active-change="activecolorChange(details, 'btnBuyCartColor', '#FF1717', $event)"
                      @change="colorChange(details, 'btnBuyCartColor', '#FF1717', $event)" :predefine="predefineColors"
                      class="color-sel" />
                    <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容"
                      v-model="details.propMap.btnBuyCartColor"
                      @change="iptColorChange(details, 'btnBuyCartColor', '#FF1717', $event)">
                    </el-input>
                    <el-button type="text" class="color-sel-btn"
                      @click="resetColor(details, 'btnBuyCartColor', '#FF1717')">重置</el-button>
                  </div>
                </el-form-item>
              </div>
              <h4>限购数量</h4>
              <div class="mar-t-2 mar-b--8">
                <el-form-item>
                  <div class="flex font-12 pad-r-30 pad-l-4">
                    <el-color-picker v-model="details.propMap.limitNumColor"
                      @active-change="activecolorChange(details, 'limitNumColor', '#FFFFFF', $event)"
                      @change="colorChange(details, 'limitNumColor', '#FFFFFF', $event)" :predefine="predefineColors"
                      class="color-sel" />
                    <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容"
                      v-model="details.propMap.limitNumColor"
                      @change="iptColorChange(details, 'limitNumColor', '#FFFFFF', $event)">
                    </el-input>
                    <el-button type="text" class="color-sel-btn"
                      @click="resetColor(details, 'limitNumColor', '#FFFFFF')">重置</el-button>
                  </div>
                </el-form-item>
              </div>
            </div>
            <div class="border-box">
              <div class="mar-b--10">
                <el-form-item>
                  <div class="flex v-align-c font-12">
                    <span>商品边角样式</span>
                    <div class="flex-item"></div>
                    <el-button-group class="mar-l-20">
                      <el-button :type="details.propMap.radius === 0 ? 'primary' : ''"
                        @click="details.propMap.radius = 0">直角</el-button>
                      <el-button :type="details.propMap.radius === 4 ? 'primary' : ''"
                        @click="details.propMap.radius = 4">圆角</el-button>
                    </el-button-group>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
    <!-- 商品选择弹层 -->
    <el-dialog :title="selectSeckillTitle" :visible.sync="selectSeckillVisible" :close-on-press-escape="true"
      width="850px">
      <component-seckill-layer :link="link" v-on:selectLink="setLink"></component-seckill-layer>
    </el-dialog>
    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <!-- appType 13 为主播小程序 -->
      <component-link-layer v-on:selectLink="setLinkTemp"></component-link-layer>
    </el-dialog>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import draggable from 'vuedraggable'
  import {
    getToken
  } from '@/utils/auth'
  import ComponentSeckillLayer from './../ComponentSeckillLayer'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import {
    listAutoPromotionGoods,
    listManualPromotionGoods
  } from '@/api/custom-page/page'
  import {
    getGroupPromotion
  } from '@/api/sell/promotion'
  import {
    getDictByGroupName
  } from '@/api/common/common'
  import tabSty1 from '@/assets/images/tab-sty-1.png'
  import tabSty11 from '@/assets/images/tab-sty-11.png'
  import tabSty2 from '@/assets/images/tab-sty-2.png'
  import tabSty21 from '@/assets/images/tab-sty-21.png'
  import tabSty3 from '@/assets/images/tab-sty-3.png'
  import tabSty31 from '@/assets/images/tab-sty-31.png'
  import tabSty4 from '@/assets/images/tab-sty-4.png'
  import tabSty41 from '@/assets/images/tab-sty-41.png'
  import iconDrag from '@/assets/images/icon-drag.gif'

  export default {
    components: {
      ComponentSeckillLayer,
      ComponentLinkLayer,
      draggable
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: [],
          componentPromotionItemList: []
        },
        fileLoading: false,
        sortNo: 0,
        manual: '1',
        goodsDetails: {
          componentGoodsId: '',
          detailsId: '',
          goodsId: '',
          goodsSortNo: 0,
          imgUrl: '',
          title: '',
          price: '',
          stock: ''
        },
        dict: {
          promotionStatus: {}
        },
        selectSeckillVisible: false,
        selectSeckillTitle: null,
        moreBtnShow: true,
        secKillType: '10',
        link: {
          title: '',
          promotionStatus: '',
          startTime: '',
          endTime: '',
          activityType: 2
        },
        linkSetVisible: false,
        autoPromotionGoodsList: [],
        manualPromotionGoodsList: [],
        predefineColors: [],
        fileLoadingPicture: false,
        remarkType: null,
        groupBuyBg: 'https://veekrayimg.joinsun.vip/upload/group-buy-bg-2.png',
        tabSty1: tabSty1,
        tabSty11: tabSty11,
        tabSty2: tabSty2,
        tabSty21: tabSty21,
        tabSty3: tabSty3,
        tabSty31: tabSty31,
        tabSty4: tabSty4,
        tabSty41: tabSty41,
        iconDrag,
        promotionActiveName: '1',
        selectPromotionId: ''
      }
    },
    mounted() {},
    // 初始化页面
    created() {
      this.resetDetails()
      this.token = {
        accessToken: getToken()
      }
      this.details = this.details1
      if (this.details.propMap) {
        this.$set(this.details.propMap, 'firstLoadNum', this.details.propMap.firstLoadNum ? this.details.propMap
          .firstLoadNum * 1 : 4)
        this.$set(this.details.propMap, 'isTitleShow', this.details.propMap.titleShow * 1 === 1)
        this.$set(this.details.propMap, 'titleColor', this.details.propMap.titleColor ? this.details.propMap
          .titleColor : '#333333')
        this.$set(this.details.propMap, 'isMoreShow', this.details.propMap.moreShow * 1 === 1)
        this.$set(this.details.propMap, 'showMoreColor', this.details.propMap.showMoreColor ? this.details.propMap
          .showMoreColor : '#ffffff')
        this.$set(this.details.propMap, 'boxBackgroundColor', this.details.propMap.boxBackgroundColor ? this.details
          .propMap.boxBackgroundColor : '#ffffff')
        this.$set(this.details.propMap, 'goodsBackgroundColor', this.details.propMap.goodsBackgroundColor ? this.details
          .propMap.goodsBackgroundColor : '#ffffff')
        this.$set(this.details.propMap, 'goodsTitleColor', this.details.propMap.goodsTitleColor ? this.details.propMap
          .goodsTitleColor : '#333333')
        this.$set(this.details.propMap, 'goodsPriceColor', this.details.propMap.goodsPriceColor ? this.details.propMap
          .goodsPriceColor : '#F8303D')
        this.$set(this.details.propMap, 'goodsScribingPriceColor', this.details.propMap.goodsScribingPriceColor ? this
          .details.propMap.goodsScribingPriceColor : '#999999')
        this.$set(this.details.propMap, 'btnBuyCartColor', this.details.propMap.btnBuyCartColor ? this.details.propMap
          .btnBuyCartColor : '#FF1717')
        this.$set(this.details.propMap, 'limitNumColor', this.details.propMap.limitNumColor ? this.details.propMap
          .limitNumColor : '#FFFFFF')
        this.$set(this.details.propMap, 'radius', this.details.propMap.radius ? this.details.propMap.radius * 1 : 4)
        this.$set(this.details.propMap, 'linkMoreType', this.details.propMap.linkMoreType ? this.details.propMap
          .linkMoreType : '')
        this.$set(this.details.propMap, 'linkMoreParams', this.details.propMap.linkMoreParams ? this.details.propMap
          .linkMoreParams : '')
        this.$set(this.details.propMap, 'linkMoreRemark', this.details.propMap.linkMoreRemark ? this.details.propMap
          .linkMoreRemark : '')
        this.$set(this.details.propMap, 'linkBackgroundImgRemark', this.details.propMap.linkBackgroundImgRemark ? this
          .details.propMap.linkBackgroundImgRemark : '')
        this.$set(this.details.propMap, 'linkBackgroundImgParams', this.details.propMap.linkBackgroundImgParams ? this
          .details.propMap.linkBackgroundImgParams : '')
        this.$set(this.details.propMap, 'linkBackgroundImgType', this.details.propMap.linkBackgroundImgType ? this
          .details.propMap.linkBackgroundImgType : '')
        this.$set(this.details.propMap, 'backgroundImg', this.details.propMap.backgroundImg ? this.details.propMap
          .backgroundImg : this.groupBuyBg)
      }
      this.$set(this.details, 'componentPromotionItemList', this.details.componentPromotionItemList ? this.details
        .componentPromotionItemList : [])
      this.getGroupPromotion()
      this.listAutoPromotionGoods()
      getDictByGroupName('PromotionDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      const that = this
      this.$bus.$on('resetDetailsGroupBuy', function(details) {
        that.details = details
        if (details.propMap) {
          that.$set(that.details.propMap, 'firstLoadNum', that.details.propMap.firstLoadNum ? that.details.propMap
            .firstLoadNum * 1 : 4)
          that.$set(that.details.propMap, 'isTitleShow', that.details.propMap.titleShow * 1 === 1)
          that.$set(that.details.propMap, 'titleColor', that.details.propMap.titleColor ? that.details.propMap
            .titleColor : '#333333')
          that.$set(that.details.propMap, 'isMoreShow', that.details.propMap.moreShow * 1 === 1)
          that.$set(that.details.propMap, 'showMoreColor', that.details.propMap.showMoreColor ? that.details.propMap
            .showMoreColor : '#ffffff')
          that.$set(that.details.propMap, 'boxBackgroundColor', that.details.propMap.boxBackgroundColor ? that
            .details.propMap.boxBackgroundColor : '#ffffff')
          that.$set(that.details.propMap, 'goodsBackgroundColor', that.details.propMap.goodsBackgroundColor ? that
            .details.propMap.goodsBackgroundColor : '#ffffff')
          that.$set(that.details.propMap, 'goodsTitleColor', that.details.propMap.goodsTitleColor ? that.details
            .propMap.goodsTitleColor : '#333333')
          that.$set(that.details.propMap, 'goodsPriceColor', that.details.propMap.goodsPriceColor ? that.details
            .propMap.goodsPriceColor : '#F8303D')
          that.$set(that.details.propMap, 'goodsScribingPriceColor', that.details.propMap.goodsScribingPriceColor
            ? that.details.propMap.goodsScribingPriceColor : '#999999')
          that.$set(that.details.propMap, 'btnBuyCartColor', that.details.propMap.btnBuyCartColor ? that.details
            .propMap.btnBuyCartColor : '#FF1717')
          that.$set(that.details.propMap, 'limitNumColor', that.details.propMap.limitNumColor ? that.details.propMap
            .limitNumColor : '#FFFFFF')
          that.$set(that.details.propMap, 'radius', that.details.propMap.radius ? that.details.propMap.radius * 1
            : 4)
          that.$set(that.details.propMap, 'linkMoreType', that.details.propMap.linkMoreType ? that.details.propMap
            .linkMoreType : '')
          that.$set(that.details.propMap, 'linkMoreRemark', that.details.propMap.linkMoreRemark ? that.details
            .propMap.linkMoreRemark : '')
          that.$set(that.details.propMap, 'linkMoreParams', that.details.propMap.linkMoreParams ? that.details
            .propMap.linkMoreParams : '')
          that.$set(that.details.propMap, 'linkBackgroundImgType', that.details.propMap.linkBackgroundImgType ? that
            .details.propMap.linkBackgroundImgType : '')
          that.$set(that.details.propMap, 'linkBackgroundImgParams', that.details.propMap.linkBackgroundImgParams
            ? that.details.propMap.linkBackgroundImgParams : '')
          that.$set(that.details.propMap, 'linkBackgroundImgRemark', that.details.propMap.linkBackgroundImgRemark
            ? that.details.propMap.linkBackgroundImgRemark : '')
          that.$set(that.details.propMap, 'backgroundImg', that.details.propMap.backgroundImg ? that.details.propMap
            .backgroundImg : that.groupBuyBg)
        }
        that.$set(that.details, 'componentPromotionItemList', that.details.componentPromotionItemList ? that.details
          .componentPromotionItemList : [])
        that.getGroupPromotion()
      })
      // 获取初始化的颜色值 全局设置
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.details.componentPromotionItemList
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.details.componentPromotionItemList = filters
        // this.btnTotalChange()
      },
      remove(index) {
        this.details.componentPromotionItemList.splice(index, 1)
        // this.btnTotalChange()
      },
      beforeUploadPicture(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
          return
        }
        this.fileLoadingPicture = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccessPicture(res, file) {
        this.fileLoadingPicture = true
        if (res.code === 101) {
          this.fileLoadingPicture = false
          this.details.propMap.backgroundImg = res.data[0]
        }
      },
      linkLayer(type) {
        this.remarkType = type
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        if (this.remarkType === 'linkMore') {
          this.$set(this.details.propMap, 'linkMoreParams', item.linkParams)
          this.$set(this.details.propMap, 'linkMoreType', item.linkType)
          this.$set(this.details.propMap, 'linkMoreRemark', item.linkRemark)
        }
        if (this.remarkType === 'linkBackgroundImg') {
          this.$set(this.details.propMap, 'linkBackgroundImgParams', item.linkParams)
          this.$set(this.details.propMap, 'linkBackgroundImgType', item.linkType)
          this.$set(this.details.propMap, 'linkBackgroundImgRemark', item.linkRemark)
        }
        this.linkSetVisible = false
      },
      setLink(item) {
        if (item.promotionId !== null) {
          this.details.componentPromotionItemList.push({
            promotionId: item.promotionId,
            title: item.title,
            promotionStatus: item.promotionStatus,
            startTime: item.startTime,
            endTime: item.endTime,
            buttonName: '',
            titleName: '',
            promotionType: '2',
            detailsId: this.details.detailsId ? this.details.detailsId : '',
            componentGoodsList: []
          })
        }
        Object.assign(this.link, item)
        this.selectSeckillVisible = false
        if (item.promotionId) {
          this.listManualPromotionGoods(item.promotionId)
        }
      },
      getGroupPromotion() {
        var that = this
        if (this.details.propMap.selectType !== '11') {
          return
        }
        if (!this.details.componentPromotionItemList || this.details.componentPromotionItemList.length === 0) {
          return
        }
        var promotionIds = ''
        this.details.componentPromotionItemList.forEach(function(item, index) {
          if (promotionIds.length === 0) {
            promotionIds = item.promotionId + ''
          } else {
            promotionIds = promotionIds + ',' + item.promotionId
          }
        })
        if (this.details.detailsId === null || this.details.detailsId === '') {
          return
        }
        getGroupPromotion(promotionIds, this.details.detailsId).then(response => {
          if (response.isError) return
          var resData = response.data
          if (resData) {
            that.details.isClickPromotionGroup = true
            resData.forEach(function(resItem, index) {
              that.details.componentPromotionItemList.forEach(function(item, index) {
                if (resItem.promotionId === item.promotionId) {
                  item.title = resItem.title
                  item.promotionStatus = resItem.promotionStatus
                  item.startTime = resItem.startTime
                  item.endTime = resItem.endTime
                }
              })
            })
          }
        })
      },
      selectTypeChange(selectType) {
        this.details.propMap.selectType = selectType
        switch (selectType) {
          default:
          case '10':
            this.details.goodsList = this.autoPromotionGoodsList
            break
          case '11':
            this.listManualPromotionGoods(this.details.propMap.promotionId)
            break
        }
      },
      sortTypeChange() {
        switch (this.details.propMap.selectType) {
          default:
          case '10':
            this.listAutoPromotionGoods()
            break
          case '11':
            this.listManualPromotionGoods(this.details.propMap.promotionId)
            break
        }
      },
      listManualPromotionGoods(promotionId) {
        var that = this
        listManualPromotionGoods({
          enterpriseId: this.getEnterpriseId(),
          promotionId: promotionId,
          sortType: this.details.propMap.sortType,
          activityType: 2
        }).then(response => {
          this.manualPromotionGoodsList = response.data
          this.details.componentPromotionItemList.forEach(function(item, index) {
            if (item.promotionId === promotionId) {
              item.componentGoodsList = that.manualPromotionGoodsList
            }
          })
          // this.details.componentPromotionItemList.push({
          //   promotionId: promotionId,
          //   goodsList: this.manualPromotionGoodsList
          // })
          // 调试数据
          // this.details.goodsList = this.manualPromotionGoodsList
        })
      },
      listAutoPromotionGoods() {
        listAutoPromotionGoods({
          enterpriseId: this.getEnterpriseId(),
          sortType: this.details.propMap.sortType,
          activityType: 2
        }).then(response => {
          this.autoPromotionGoodsList = response.data
        })
      },
      // 打开选择活动选择器事件
      selectSeckillLayer(item) {
        this.selectSeckillVisible = true
        this.selectSeckillTitle = '活动选择器'
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: [],
          componentPromotionItemList: []
        }
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj.propMap[key] = e
        } else {
          obj.propMap[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj.propMap[key] = defaultColor
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 50) {
            obj.propMap[key] = 50
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      },
      checkboxChange(prop, val) {
        this.details1.propMap[prop] = val ? '1' : '0'
      }
    }
  }
</script>

<style lang="less" scoped>
  .drag-box {
    position: relative;

    .border-box {
      margin-bottom: 15px;
      border-radius: 0;
    }

    .btn-edit-del {
      width: 30px;
      height: 30px;
      overflow: hidden;
      position: absolute;
      right: 0px;
      top: 0px;
      display: block;
      z-index: 90;
      font-size: 14px;
      text-align: right;
      display: none;

      &.selected {
        display: block;
      }
    }

    .btn-edit-del>div {
      width: 16px;
      height: 16px;
      display: inline-block;
      text-indent: -100em;
      text-align: left;
      font-size: 10px;
      color: #333;
      cursor: pointer;
      position: relative;
      z-index: 11;
      background: url('@/../../../../../../assets/images/icons-close-1.png') no-repeat;
      background-size: 16px 16px;
    }

    .border-r-blue {
      border-right: #eef4f9 1px solid;
    }

    .border-b-blue {
      border-bottom: #eef4f9 1px solid;
    }

    .promotion-rinfo {
      background: #fbfcff;
    }

    .promotion-r-title {
      background: #ffffff;
    }

    .line-1 {
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }

    .promotion-rtype {
      span:first-child {
        min-width: 63px;
        text-align: right;
        margin-right: 15px;
      }

      label:first-child {
        font-weight: normal;
        min-width: 53px;
        text-align: right;
        margin-right: 15px;
      }

      /deep/ .el-input__inner {
        background: #ffffff;
        border: #fff 1px solid;
      }
    }
  }

  .promotion-tab-style {
    margin: 17px 25px 0px 25px;
    padding: 0 1px;
    background: #f5f6fa;
    border-radius: 4px;

    li {
      list-style-type: none;
      padding: 0;
      height: 48px;
      margin: 1px 0;
      cursor: pointer;

      &.actived {
        border-radius: 4px;
        background: #ffffff;
      }

      img {
        display: inline-block;
      }
    }
  }

  /deep/ .promotion-pane-tab.el-tabs {
    .el-tabs__item.is-top:nth-child(2) {
      margin-left: 42px;
      margin-right: 52px !important;
    }
  }
</style>
